<!-- eslint-disable vue/valid-v-slot -->
<!-- eslint-disable vue/no-parsing-error -->
<template>
  <div class="main-container">
    <div class="grid-demo" style="display: flex; justify-content: space-between" :gutter="20">
      <div class="cardBox">
        <div class="padding"> 物联网系统负载</div>
        <div class="text"
          >{{ Number((monitorForm.processCpuLoadCumulative * 100).toFixed(2)) }}%</div
        >
      </div>

      <div class="cardBox">
        <div class="padding"> 物联网系统运行内存 </div>
        <div class="text">{{ monitorForm.residentSetSize }}</div>
      </div>

      <div class="cardBox" @click="visible = true">
        <div class="padding"> 物联网系统线程数 </div>
        <div class="text">{{ monitorForm.threads.length }}个</div>
      </div>

      <div class="cardBox">
        <div class="padding"> 物联网系统运行时长 </div>
        <div class="text">{{ useCommon.getTimeDifference(monitorForm.startTime) }}</div>
      </div>

      <div class="cardBox">
        <div class="padding"> 物联网系统虚拟内存</div>
        <div class="text">{{ useCommon.numbers(monitorForm.virtualSize) }}</div>
      </div>
    </div>
    <div class="java">
      <div>操作系统</div>
      <a-row class="grid-demo" :gutter="20">
        <a-col :span="4">
          <div class="top">负载</div>
          <div class="pro">
            <a-progress
              type="circle"
              :percent="monitorForm.cpu.load1"
              :status="
                monitorForm.cpu.load1 >= 0.9
                  ? 'danger'
                  : monitorForm.cpu.load1 >= 0.8
                  ? 'warning'
                  : ''
              "
              size="large"
              :stroke-width="10"
            />
          </div>
          <div style="width: 100%; text-align: center; margin-top: 10px"
            ><span v-if="monitorForm.cpu.load1 < 0.8" style="color: darkgray">运行流畅</span
            ><span
              v-else-if="monitorForm.cpu.load1 >= 0.8 && monitorForm.cpu.load1 < 0.9"
              style="color: coral"
              >运行缓慢</span
            >
            <span v-else style="color: red">运行阻塞</span></div
          >
        </a-col>
        <a-col :span="4">
          <div class="top">CPU</div>
          <div class="pro">
            <a-progress
              type="circle"
              :percent="monitorForm.cpu.usage"
              :status="
                monitorForm.cpu.usage >= 0.9
                  ? 'danger'
                  : monitorForm.cpu.usage / 100 >= 0.8
                  ? 'warning'
                  : ''
              "
              size="large"
              :stroke-width="10"
            />
          </div>
          <div class="top">{{ monitorForm.cpu.logicalProcessorCount }}核心</div>
        </a-col>
        <a-col :span="4">
          <div class="top">运行内存</div>
          <div class="pro">
            <a-progress
              style="width: 100px"
              type="circle"
              :percent="monitorForm.memory.usage"
              :status="
                monitorForm.memory.usage >= 0.9
                  ? 'danger'
                  : monitorForm.memory.usage >= 0.8
                  ? 'warning'
                  : ''
              "
              size="large"
              :stroke-width="10"
            />
          </div>
          <div class="top"
            >{{ (monitorForm.memory.used / 1024 / 1024 / 1024).toFixed(2) }}/{{
              (monitorForm.memory.total / 1024 / 1024 / 1024).toFixed(2)
            }}(GB)</div
          >
        </a-col>
        <a-col v-for="item in monitorForm.disks" :key="item.name" :span="4">
          <div class="top">{{ item.name }} </div>
          <div class="pro">
            <a-progress
              style="width: 100px; height: 100px"
              type="circle"
              :percent="item.usage"
              :status="item.usage >= 0.9 ? 'danger' : item.usage >= 0.8 ? 'warning' : ''"
              size="large"
              :stroke-width="10"
            />
          </div>
          <div class="top"
            >{{ (item.usedSpace / 1024 / 1024 / 1024).toFixed(2) }}/{{
              (item.totalSpace / 1024 / 1024 / 1024).toFixed(2)
            }}(GB)</div
          >
        </a-col>
      </a-row>
    </div>
    <div class="java">
      <div>操作系统监控记录</div>
      <div id="main5" style="width: 100%; height: 500px"></div>
    </div>
    <div class="java">
      <div>实时流量</div>
      <div style="display: flex; margin-left: 8%">
        <div class="boxa-left">
          <div>上行流量</div>
          <div class="bottoms">{{ useCommon.numbers(shuchuNum.top) }}</div>
        </div>
        <div class="box-left">
          <div>下行流量</div>
          <div class="bottoms">{{ useCommon.numbers(shuchuNum.bottom) }}</div>
        </div>
        <div class="box-left">
          <div>总发送</div>
          <div class="bottoms">{{ useCommon.numbers(monitorForm.networkDisk.sendByte) }}</div>
        </div>
        <div class="box-left">
          <div>总接收</div>
          <div class="bottoms">{{ useCommon.numbers(monitorForm.networkDisk.receiveByte) }}</div>
        </div>
      </div>
      <div id="main6" style="width: 100%; height: 500px"></div>
    </div>
    <a-modal v-model:visible="visible" width="40%" :mask-closable="false">
      <template #title> 线程列表</template>
      <div>
        <a-table :columns="list" :data="monitorForm.threads">
          <template #columns>
            <a-table-column
              v-for="item of list"
              :key="item.dataIndex"
              align="left"
              :title="(item.title as string)"
              :data-index="(item.dataIndex as string)"
            >
              <template v-if="item.dataIndex === 'state'" #cell="{ record }">
                <a-tag v-if="record.state == 'NEW'">NEW</a-tag>
                <a-tag color="green" v-if="record.state == 'RUNNABLE'">RUNNABLE</a-tag>
                <a-tag color="orange" v-if="record.state == 'BLOCKED'">BLOCKED</a-tag>
                <a-tag color="cyan" v-if="record.state == 'WAITING'">WAITING</a-tag>
                <a-tag color="blue" v-if="record.state == 'TIMED_WAITING'">TIMED_WAITING</a-tag>
                <a-tag color="red" v-if="record.state == 'TERMINATED'" bordered>TERMINATED</a-tag>
              </template>
              <template v-if="item.dataIndex === 'load'" #cell="{ record }">
                {{ Number(record.load * 100).toFixed(2) }}%
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
      <template #footer>
        <a-space>
          <!-- <a-button @click="handleCancelsb">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkBansb">确定</a-button> -->
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import * as echarts from 'echarts'
  import * as echart from 'echarts'
  import { monitor } from '@/api/url'
  import { get } from '@/api/http'
  import { onMounted, ref, onUnmounted, onBeforeMount } from 'vue'
  import useCommonStore from '@/store/modules/common'
  const useCommon = useCommonStore()
  const visible = ref(false)
  const list = ref([
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '名字',
      dataIndex: 'name',
    },
    {
      title: '状态',
      dataIndex: 'state',
    },
    {
      title: '负载',
      dataIndex: 'load',
    },
  ])
  const monitorForm: any = ref({
    threads: [],
    processCpuLoadCumulative: 0,
    residentSetSize: 0,
    onLine: 0,
    processCount: 0,
    threadCount: 0,
    networkDisk: {
      sendByte: 0,
      receiveByte: 0,
    },
    server: { name: '---', ip: '---', osName: '---', osArch: '---' },
    jvmRam: { total: 0, used: 0, free: 0, usage: 0 },
    memory: { total: 0, used: 0, free: 0, usage: 0 },
    cpu: { load1: 0, usage: 0 },
    disks: [
      {
        name: '本地固定磁盘 (C:)', //磁盘名称
        label: '', //磁盘标签
        mount: '', //磁盘路径
        totalSpace: 0, //磁盘总大小
        usedSpace: 0, //磁盘已用大小
        freeSpace: 0, //磁盘剩余大小
        usage: 0,
      },
    ],
  })

  const disks = ref([
    {
      name: '本地固定磁盘 (C:)', //磁盘名称
      label: '', //磁盘标签
      mount: '', //磁盘路径
      totalSpace: 0, //磁盘总大小
      usedSpace: 0, //磁盘已用大小
      freeSpace: 0, //磁盘剩余大小
      usage: 0,
    },
  ])
  let aa: any = null
  const shuchuNum = ref({
    top: 0,
    bottom: 0,
    time: '',
  })

  const hours = ref([])
  const value3: any = ref([])
  const value4: any = ref([])
  const lastSecondData = ref()

  function getMonitors() {
    get({ url: monitor }).then((res) => {
      res.data.bytesSent = useCommon.numbers(res.data.networkDisk.bytesSent)
      res.data.bytesReceive = useCommon.numbers(res.data.networkDisk.bytesReceive)
      res.data.residentSetSize = useCommon.numbers(res.data.residentSetSize)
      monitorForm.value = res.data
      disks.value = []
      res.data.disks.forEach((element: any, index: any) => {
        if (index > 0) {
          disks.value.push(element)
        }
      })

      var hour: any = []
      var value: any = []
      var value1: any = []
      var value2: any = []
      res.data.records.forEach((item: any) => {
        hour.push(item.hour)
        value.push(Math.floor(item.cpu * 10000) / 100)
        value1.push(Math.floor(item.ram * 10000) / 100)
        value2.push(Math.floor(item.load * 10000) / 100)
      })

      var chartDom5: any = document.getElementById('main5')
      var myCharts = echarts.init(chartDom5)
      myCharts.setOption({
        xAxis: {
          type: 'category',
          data: hour,
        },
        series: [
          {
            name: '负载',
            data: value2,
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#3491fa', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#E8F7FF', // 100% 处的颜色
                  },
                ],
              },
            },
            lineStyle: {
              normal: {
                color: '#3491fa',
              },
            },
          },
          {
            name: 'CPU',
            data: value,
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#00B42A', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#E8FFEA', // 100% 处的颜色
                  },
                ],
              },
            },
            lineStyle: {
              // color: {
              //   type: 'linear',
              //   x: 0,
              //   y: 0,
              //   x2: 1,
              //   y2: 0,
              //   colorStops: [
              //     {
              //       offset: 0,
              //       color: 'red', // 0% 处的颜色
              //     },
              //     {
              //       offset: 1,
              //       color: 'blue', // 100% 处的颜色
              //     },
              //   ],
              //   global: false, // 缺省为 false
              // },
            },
          },
          {
            name: '运行内存',
            data: value1,
            type: 'line',
            symbol: 'none',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#F7BA1E', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#FFFCE8', // 100% 处的颜色
                  },
                ],
              },
            },
            lineStyle: {
              normal: {
                color: '#F7BA1E',
              },
            },
          },
        ],
      })
      // options = {
      //   color: ['#3491fa', '#00B42A', '#F7BA1E', '#F53F3F'],
      //   xAxis: {
      //     type: 'category',
      //     data: hour,
      //   },
      //   yAxis: {
      //     type: 'value',
      //     axisLabel: {
      //       formatter: '{value} %',
      //     },
      //   },
      //   dataZoom: [
      //     {
      //       type: 'inside',
      //       start: 0,
      //       end: 20,
      //     },
      //     {
      //       start: 0,
      //       end: 20,
      //     },
      //   ],
      //   tooltip: {
      //     trigger: 'axis',
      //   },
      //   legend: {
      //     data: ['负载', 'CPU', '运行内存'],
      //     textStyle: {
      //       color: '#3491FA',
      //     },
      //   },
      //   series: [
      //     {
      //       name: '负载',
      //       data: value2,
      //       type: 'line',
      //       smooth: true,
      //       symbol: 'none',
      //       areaStyle: {
      //         color: {
      //           type: 'linear',
      //           x: 0, //右
      //           y: 0, //下
      //           x2: 0, //左
      //           y2: 1, //上
      //           colorStops: [
      //             {
      //               offset: 0,
      //               color: '#3491fa', // 0% 处的颜色
      //             },
      //             {
      //               offset: 1,
      //               color: '#E8F7FF', // 100% 处的颜色
      //             },
      //           ],
      //         },
      //       },
      //       lineStyle: {
      //         normal: {
      //           color: '#3491fa',
      //         },
      //       },
      //     },
      //     {
      //       name: 'CPU',
      //       data: value,
      //       type: 'line',
      //       smooth: true,
      //       symbol: 'none',
      //       areaStyle: {
      //         color: {
      //           type: 'linear',
      //           x: 0, //右
      //           y: 0, //下
      //           x2: 0, //左
      //           y2: 1, //上
      //           colorStops: [
      //             {
      //               offset: 0,
      //               color: '#00B42A', // 0% 处的颜色
      //             },
      //             {
      //               offset: 1,
      //               color: '#E8FFEA', // 100% 处的颜色
      //             },
      //           ],
      //         },
      //       },
      //       lineStyle: {
      //         normal: {
      //           color: '#00B42A',
      //         },
      //       },
      //     },
      //     {
      //       name: '运行内存',
      //       data: value1,
      //       type: 'line',
      //       symbol: 'none',
      //       areaStyle: {
      //         color: {
      //           type: 'linear',
      //           x: 0, //右
      //           y: 0, //下
      //           x2: 0, //左
      //           y2: 1, //上
      //           colorStops: [
      //             {
      //               offset: 0,
      //               color: '#F7BA1E', // 0% 处的颜色
      //             },
      //             {
      //               offset: 1,
      //               color: '#FFFCE8', // 100% 处的颜色
      //             },
      //           ],
      //         },
      //       },
      //       lineStyle: {
      //         normal: {
      //           color: '#F7BA1E',
      //         },
      //       },
      //     },
      //   ],
      // }

      // options && myCharts.setOption(options)
      //实时流量

      if (lastSecondData.value !== undefined) {
        // 如果上一秒的数据已存在，进行比较
        shuchuNum.value.bottom = Math.floor(
          res.data.networkDisk.receiveByte - lastSecondData.value.receiveByte
        )
        shuchuNum.value.top = Math.floor(
          res.data.networkDisk.sendByte - lastSecondData.value.sendByte
        )
        const now = new Date()
        const year = now.getFullYear()
        const month = now.getMonth() + 1
        const day = now.getDate()
        const hour = now.getHours()
        const minute = now.getMinutes()
        const second = now.getSeconds()
        shuchuNum.value.time = `${year}-${month}-${day} ${hour}:${minute}:${second}`
        // console.log(shuchuNum.value.time, '看看')
        // 这里可以添加具体的比较逻辑
        hours.value.push(`${year}-${month}-${day} ${hour}:${minute}:${second}`)
        value3.value.push(
          useCommon.numbersa(res.data.networkDisk.sendByte - lastSecondData.value.sendByte)
        )
        value4.value.push(
          useCommon.numbersa(res.data.networkDisk.receiveByte - lastSecondData.value.receiveByte)
        )
        if (hours.value.length > 10) {
          hours.value.shift()
          value4.value.shift()
          value3.value.shift()
        }
      } else {
        hours.value.push(shuchuNum.value.time)
        value3.value.push(useCommon.numbersa(shuchuNum.value.top))
        value4.value.push(useCommon.numbersa(shuchuNum.value.bottom))
      }
      // 更新上一秒数据为当前秒的数据
      lastSecondData.value = res.data.networkDisk
      var chartDom6: any = document.getElementById('main6')
      var myCharts1 = echart.init(chartDom6)
      myCharts1.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: hours.value,
        },
        series: [
          {
            name: '上行流量',
            data: value3.value,
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#3491fa', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#E8F7FF', // 100% 处的颜色
                  },
                ],
              },
            },
            lineStyle: {
              normal: {
                color: '#3491fa',
              },
            },
          },
          {
            name: '下行流量',
            data: value4.value,
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#00B42A', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#E8FFEA', // 100% 处的颜色
                  },
                ],
              },
            },
            lineStyle: {
              normal: {
                color: '#00B42A',
              },
            },
          },
        ],
      })
      // var options1
      // options1 = {
      //   color: ['#3491fa', '#00B42A', '#F7BA1E', '#F53F3F'],
      //   xAxis: {
      //     type: 'category',
      //     boundaryGap: false,
      //     data: hours.value,
      //   },
      //   yAxis: {
      //     type: 'value',
      //     axisLabel: {
      //       formatter: '{value}',
      //     },
      //   },
      //   tooltip: {
      //     trigger: 'axis',
      //   },
      //   legend: {
      //     data: ['上行流量', '下行流量'],
      //     textStyle: {
      //       color: '#333',
      //     },
      //   },
      //   series: [
      //     {
      //       name: '上行流量',
      //       data: value3.value,
      //       type: 'line',
      //       smooth: true,
      //       symbol: 'none',
      //       areaStyle: {
      //         color: {
      //           type: 'linear',
      //           x: 0, //右
      //           y: 0, //下
      //           x2: 0, //左
      //           y2: 1, //上
      //           colorStops: [
      //             {
      //               offset: 0,
      //               color: '#3491fa', // 0% 处的颜色
      //             },
      //             {
      //               offset: 1,
      //               color: '#E8F7FF', // 100% 处的颜色
      //             },
      //           ],
      //         },
      //       },
      //       lineStyle: {
      //         normal: {
      //           color: '#3491fa',
      //         },
      //       },
      //     },
      //     {
      //       name: '下行流量',
      //       data: value4.value,
      //       type: 'line',
      //       smooth: true,
      //       symbol: 'none',
      //       areaStyle: {
      //         color: {
      //           type: 'linear',
      //           x: 0, //右
      //           y: 0, //下
      //           x2: 0, //左
      //           y2: 1, //上
      //           colorStops: [
      //             {
      //               offset: 0,
      //               color: '#00B42A', // 0% 处的颜色
      //             },
      //             {
      //               offset: 1,
      //               color: '#E8FFEA', // 100% 处的颜色
      //             },
      //           ],
      //         },
      //       },
      //       lineStyle: {
      //         normal: {
      //           color: '#00B42A',
      //         },
      //       },
      //     },
      //   ],
      // }
      // options1 && myCharts1.setOption(options1)
    })
  }

  function getMonitor() {
    get({ url: monitor }).then((res) => {
      res.data.bytesSent = useCommon.numbers(res.data.networkDisk.bytesSent)
      res.data.bytesReceive = useCommon.numbers(res.data.networkDisk.bytesReceive)
      res.data.residentSetSize = useCommon.numbers(res.data.residentSetSize)
      monitorForm.value = res.data
      disks.value = []
      res.data.disks.forEach((element: any, index: any) => {
        if (index > 0) {
          disks.value.push(element)
        }
      })

      var hour: any = []
      var value: any = []
      var value1: any = []
      var value2: any = []
      res.data.records.forEach((item: any) => {
        hour.push(item.hour)
        value.push(Math.floor(item.cpu * 10000) / 100)
        value1.push(Math.floor(item.ram * 10000) / 100)
        value2.push(Math.floor(item.load * 10000) / 100)
      })

      var chartDom5: any = document.getElementById('main5')
      var myCharts = echarts.init(chartDom5)
      var options
      options = {
        color: ['#3491fa', '#00B42A', '#F7BA1E', '#F53F3F'],
        xAxis: {
          type: 'category',
          data: hour,
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} %',
          },
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 20,
          },
          {
            start: 0,
            end: 20,
          },
        ],
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['负载', 'CPU', '运行内存'],
          textStyle: {
            color: '#3491FA',
          },
        },
        series: [
          {
            name: '负载',
            data: value2,
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#3491fa', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#E8F7FF', // 100% 处的颜色
                  },
                ],
              },
            },
            lineStyle: {
              normal: {
                color: '#3491fa',
              },
            },
          },
          {
            name: 'CPU',
            data: value,
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#00B42A', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#E8FFEA', // 100% 处的颜色
                  },
                ],
              },
            },
            lineStyle: {
              normal: {
                color: '#00B42A',
              },
            },
          },
          {
            name: '运行内存',
            data: value1,
            type: 'line',
            symbol: 'none',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#F7BA1E', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#FFFCE8', // 100% 处的颜色
                  },
                ],
              },
            },
            lineStyle: {
              normal: {
                color: '#F7BA1E',
              },
            },
          },
        ],
      }

      options && myCharts.setOption(options)
      //实时流量

      if (lastSecondData.value !== undefined) {
        // 如果上一秒的数据已存在，进行比较
        shuchuNum.value.bottom = Math.floor(
          res.data.networkDisk.receiveByte - lastSecondData.value.receiveByte
        )
        shuchuNum.value.top = Math.floor(
          res.data.networkDisk.sendByte - lastSecondData.value.sendByte
        )
        const now = new Date()
        const year = now.getFullYear()
        const month = now.getMonth() + 1
        const day = now.getDate()
        const hour = now.getHours()
        const minute = now.getMinutes()
        const second = now.getSeconds()
        shuchuNum.value.time = `${year}-${month}-${day} ${hour}:${minute}:${second}`
        // console.log(shuchuNum.value.time, '看看')
        // 这里可以添加具体的比较逻辑
        hours.value.push(`${year}-${month}-${day} ${hour}:${minute}:${second}`)
        value3.value.push(
          useCommon.numbersa(res.data.networkDisk.sendByte - lastSecondData.value.sendByte)
        )
        value4.value.push(
          useCommon.numbersa(res.data.networkDisk.receiveByte - lastSecondData.value.receiveByte)
        )
        if (hours.value.length > 10) {
          hours.value.shift()
          value4.value.shift()
          value3.value.shift()
        }
      } else {
        hours.value.push(shuchuNum.value.time)
        value3.value.push(useCommon.numbersa(shuchuNum.value.top))
        value4.value.push(useCommon.numbersa(shuchuNum.value.bottom))
      }
      // 更新上一秒数据为当前秒的数据
      lastSecondData.value = res.data.networkDisk
      var chartDom6: any = document.getElementById('main6')
      var myCharts1 = echart.init(chartDom6)
      var options1
      options1 = {
        color: ['#3491fa', '#00B42A', '#F7BA1E', '#F53F3F'],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: hours.value,
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}',
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['上行流量', '下行流量'],
          textStyle: {
            color: '#333',
          },
        },
        series: [
          {
            name: '上行流量',
            data: value3.value,
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#3491fa', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#E8F7FF', // 100% 处的颜色
                  },
                ],
              },
            },
            lineStyle: {
              normal: {
                color: '#3491fa',
              },
            },
          },
          {
            name: '下行流量',
            data: value4.value,
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#00B42A', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#E8FFEA', // 100% 处的颜色
                  },
                ],
              },
            },
            lineStyle: {
              normal: {
                color: '#00B42A',
              },
            },
          },
        ],
      }
      options1 && myCharts1.setOption(options1)
    })
  }

  function lunxun() {
    aa = window.setInterval(() => {
      setTimeout(() => {
        getMonitors()
      }, 0)
    }, 1000)
  }

  // lunxun()

  onBeforeMount(() => {
    const now = new Date()
    const year = now.getFullYear()
    const month = now.getMonth() + 1
    const day = now.getDate()
    const hour = now.getHours()
    const minute = now.getMinutes()
    const second = now.getSeconds()
    shuchuNum.value.time = `${year}-${month}-${day} ${hour}:${minute}:${second}`
    getMonitor()
    lunxun()
  })

  onMounted(() => {})
  onUnmounted(() => {
    clearInterval(aa)
    console.log('销毁')
  })
</script>

<style lang="less" scoped>
  :deep(.arco-progress-circle-wrapper) {
    width: 100px !important;
    height: 100px !important;
  }
  .top {
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }
  .pro {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  .cardBox {
    width: 19%;
    height: 135px;
    border-radius: 10px;
    text-align: center;
    background-color: var(--color-bg-2);
  }
  .padding {
    padding: 30px 0;
  }

  .java {
    margin: 20px 0;
    border-radius: 10px;
    padding: 20px;
    background-color: var(--color-bg-2);
    .box-left {
      margin-top: 20px;
      margin-left: 60px;
      color: #4e5969;
      .bottoms {
        margin-top: 15px;
      }
    }
    .boxa-left {
      margin-top: 20px;
      color: #4e5969;
      .bottoms {
        margin-top: 15px;
      }
    }
  }
  .text {
    font-size: 18px;
  }
  .avatar-container {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    vertical-align: middle;
  }

  .gender-container {
    .gender-icon {
      width: 20px;
    }
  }
</style>
